<%@ include file="/WEB-INF/views/includes/include.jsp"%>

<table border="2" width="100%" class="enemyinfo">

	<thead>
		<tr>
			<th scope="col">Profile</th>

		</tr>
	</thead>

	<tbody>
		<tr>
			<td><img src="images/loading.gif"></td>
		</tr>

		<tr>
			<td>
			<h2>${fname}</h2>
			</td>
		</tr>
		<tr>
			<td>
			<h3>${nationality}</h3>
			</td>
		</tr>

		<tr>
			<td>
			<h3>Level:${level}</h3>
			</td>
		</tr>

		<tr>
			<td>
			<h3>Karma:${karma}</h3>
			</td>
		</tr>
		<tr>
			<td><span id="attackbutton"> Attack</span></td>
		</tr>
	</tbody>

</table>

<script language="javascript">
//location id
var locID=${locID};
//ID of the enemy
var pid=${pid};
$(function() {
 $(".enemyinfo tr").mouseover(function() {
		$(this).addClass("statsover");
	}).mouseout(function() {
		$(this).removeClass("statsover");
	});
		$('#attackbutton').button();
		$('#attackbutton').bind('click',function(event) {
			// FIXME. Remove the dialog box. Un-necessary step here. Just use the 
			//reserve army to fight this deployment
		$('#dialog-message').html("<img src='images/loading.gif'>");
		$('#dialog-message').load('deploy/getattackterritory', {
			locID : locID
		});
		
		$('#dialog-message').dialog('open');
	});
	
$("#dialog-message").dialog({
			modal: true,
			autoOpen: false,
			show: 'blind',
			hide: 'explode',
			buttons: {
				Ok: function() {
					$(this).dialog('close');
				}
			}
		});
	});
					
</script>


<div id="dialog-message" title="Attack">
<div id="dcontent"><img src="images/loading.gif"></div>
</div>

